Chart export

Use the chart export feature to download data from the chart as a CSV file.

The export function is defined in the ChartDataExporter class, which is instantiated in the main entry file, bootstrap.ts.

To trigger an export, create a chartDataExporter instance and call the export handler—typically from a button's onClick event:

export const onClickHandler = (chartDataExporter: ChartDataExporter) => {
    chartDataExporter.exportChartData();
}

The generated CSV file includes:

Candle data
Key studies
Candle data from compare charts (if any)

In DXcharts, export is triggered when the user clicks Export on the right side of the toolbar.

Example

import React, { useRef, useCallback } from 'react';
import { DemoChart } from '../../../src/components/DemoChart';
import { ChartDataExporter } from '@dx-private/dxchart5-react/dist/chart/containers/chart-export-data/ChartDataExporter';
import { FlexContainer } from '../../../src/components/FlexContainer';
import { ChartBootstrap } from '../../../src/utils/chart.model';
export const ChartExportComponent = () => {
    const localchart = useRef<ChartBootstrap>();
    const onChartCreated = useCallback((chart: ChartBootstrap) => {
        localchart.current = chart;
    }, []);
    const exportData = () => {
        if (localchart.current !== undefined) {
            // TODO fix TS error
            // @ts-ignore
            const chartDataExporter = new ChartDataExporter(
                localchart.current.chartModel,
                localchart.current.studies.model,
                periodInSecondsFormatter(localchart.current.chartModel.getPeriod()),
            );
            chartDataExporter.exportChartData();
        }
    };
    return (
        <>
            <div>
                <FlexContainer>
                    <button onClick={exportData}>Export Chart Data</button>
                </FlexContainer>
                <FlexContainer>
                    <DemoChart onChartCreated={onChartCreated} />
                </FlexContainer>
            </div>
        </>
    );
};
/**
 * Formats period in ms to human-readable string.
 * @param periodInMs
 * @doc-tags utility,period
 */
export const periodInSecondsFormatter = (periodInMs: number): string => {
    const yearInMs = 29030400000;
    const month = yearInMs / 12;
    const week = month / 4;
    const day = week / 7;
    const hour = day / 24;
    const minute = hour / 60;
    if (periodInMs < minute) {
        return `${periodInMs}s`;
    }
    if (periodInMs >= minute && periodInMs < hour) {
        return `${Math.floor(periodInMs / minute)}m`;
    }
    if (periodInMs >= hour && periodInMs < day) {
        return `${Math.floor(periodInMs / hour)}h`;
    }
    if (periodInMs >= day && periodInMs < week) {
        return `${Math.floor(periodInMs / day)}d`;
    }
    if (periodInMs >= week && periodInMs < month) {
        return `${Math.floor(periodInMs / week)}w`;
    }
    if (periodInMs >= month && periodInMs < yearInMs) {
        return `${Math.floor(periodInMs / month)}m`;
    }
    return `${Math.floor(periodInMs / yearInMs)}y`;
};

Example​

Example